<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhczPIqFEexqNywU3nbMRERTiRleb0nrc8WIaTkhmhuH2FQw4WhRNJS_P6eVV7G9Xgv3yJz3DvYmfKg"
	type="text/javascript"></script>


<script type="text/javascript">

    //<![CDATA[

	var map;
	var myPano;
	
	var currPos=0;
	var animationOn = false;
	
	var pointMove;
	
	var aPosLat = new Array();
	var aPosLng = new Array();
	
    var baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);
	
	aPosLat[0]=37.54537694391015;aPosLng[0]=-77.45882749557495;
	aPosLat[1]=37.545036679829;aPosLng[1]=-77.45786190032959;
	aPosLat[2]=37.544577320855815;aPosLng[2]=-77.45657444000244;
	aPosLat[3]=37.545955389283776;aPosLng[3]=-77.45651006698608;
	aPosLat[4]=37.54731641951616;aPosLng[4]=-77.45655298233032;
	aPosLat[5]=37.54622759731824;aPosLng[5]= -77.45723962783813;
	aPosLat[6]=37.5466359075062;aPosLng[6]= -77.45850563049316;
	aPosLat[7]=37.54602344138558;aPosLng[7]= -77.45880603790283;
	aPosLat[8]=37.54553006223998;aPosLng[8]= -77.4591064453125;
	
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
		//map.addControl(new GLargeMapControl());
		//map.removeMapType(G_HYBRID_MAP);
		map.addControl(new GMapTypeControl()); 
	    map.addControl(new GOverviewMapControl());
        map.enableDoubleClickZoom();
    	
		map.setCenter(new GLatLng(37.545666, -77.45857), 15);
		
		var pointMove = new GLatLng(37.545666, -77.45857);
		map.addOverlay(new GMarker(pointMove));
		map.openInfoWindow(map.getCenter(),
                           document.createTextNode("My home."));
	    
    	
		move();
	
      }
    }
	
   function createMarker(point, index) 
   {
          // Create a lettered icon for this point using our icon class
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

          // Set up our GMarkerOptions object
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("Car <b>" + letter + "</b>");
          });
          return marker;
   }
		
	function move()
	{
		if(animationOn)
		{
			//map.removeOverlay(pointMove);
			map.clearOverlays();
	
			pointMove = new GLatLng(aPosLat[currPos],aPosLng[currPos]);
			//map.addOverlay(new GMarker(pointMove));
			map.addOverlay(createMarker(pointMove, 0));
			if(currPos>0)
			{
				pointMove = new GLatLng(aPosLat[9-currPos],aPosLng[9-currPos]);
			}
			map.addOverlay(createMarker(pointMove, 1));
			//map.addOverlay(new GMarker(pointMove));	
			
			//alert(aPosLat[currPos].toString() + " - " +  aPosLng[currPos].toString());
			currPos++;
			if(currPos==aPosLat.length-1)
			{
				currPos=0;
			}
			
		}
		window.setTimeout('move()', 5000);
	}
	
	function animation()
	{
		if(animationOn)
		{
			animationOn=false;
		}
		else
		{
			animationOn=true;
		}
		
		document.getElementById("Animation").value = (!animationOn).toString();
	}
	
	function handleNoFlash(errorCode) {
      if (errorCode == FLASH_UNAVAILABLE) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
      }
    }  
	
	
	function setType(){
	/*	
	* G_NORMAL_MAP- the default view
    * G_SATELLITE_MAP - showing Google Earth satellite images
    * G_HYBRID_MAP - showing a mixture of normal and satellite views
    * G_DEFAULT_MAP_TYPES - an array of these three types, useful for iterative processing
	*/
  		map.setMapType(G_DEFAULT_MAP_TYPES[0]);
  
	}
	
	  //]]>
    </script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>


<input type="button" id="Animation" value="Start" onclick="animation();" />

<div name="pano" id="pano" style="width: 500px; height: 300px"></div>
</body>
</html>

